<template>
    <div class="icon-text-item-container">
        <ElSvgIcon 
            :a-icon-name="aIconName" 
            :a-color="aColor"
            :a-size="aSize"
        >
        </ElSvgIcon>
        <span class="text" v-if="aIsTextShow">{{ aTextContent }}</span>
    </div>
</template>
<script setup lang='ts'>
import SvgIcon from '../svg_icon/svg_icon_index.vue';
import ElSvgIcon from '../el-svg-icon/el_svg_icon_index.vue';
    //#region defineXxx
    defineOptions({
        name:'icon_text_item'
    });

    const props=defineProps({
        aIconName:{
            type:String,
            required:true
        },
        aColor:{
            type:String,
            default:'currentColor'
        },
        aSize:{
            type:Number,
            default:12
        },
        aTextContent:{
            type:String,
            default:'title'
        },
        aIsTextShow:{
            type:Boolean,
            default:true
        }
    });

    const emit = defineEmits<{
        event1:[para1:number,para2:string],
        event2:[para1:number,para2:string],
    }>();
    //#endregion
    
    
</script>
<style lang='less' scoped>
.icon-text-item-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .text{
        margin-left: 5px;
    }
}
</style>